<template>
    <header id="header" class="cms-header">
        <div class="cms-header-logo" style="color: #fff;font-size: 22px;">
            <img class="cms-logo" src="../../assets/img/logo.png" style="width: 45px;height: 45px" alt=""> 链鸽
        </div>
        <div class="cms-header-breadcrumb">
            <breadcrumb :breadcrumbList="breadcrumbList"/>
        </div>
        <div class="cms-header-user">
            <div class="top-nav">
                <el-dropdown class="pull-right user-menu" @command="handleCommand" trigger="click">
                    <span class="el-dropdown-link">
                    超级管理员 <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu style="width:100px;text-align: center;" slot="dropdown">
                        <el-dropdown-item command="logout"><a><i class="icon-key"></i> 退出</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </header>
</template>

<script>
    import {UserLogout} from '@/utils/request';
    import Breadcrumb from '@/components/breadcrumb';
    export default {
        components: {Breadcrumb},
        data: function() {
            return {
                breadcrumbList: [],
            }
        },
        mounted(){
            this.getBreadcrumb();
        },
        watch: {
            $route() {
                this.getBreadcrumb()
            }
        },
        methods:{
            getBreadcrumb() {
                var matchs = this.$route.matched;
                //过滤首页和404界面
                //过滤首页和404界面
                if(matchs[0].redirect == '/main'){
                    this.breadcrumbList = [matchs[1]];
                    //设置菜单选中
                    this.$store.dispatch('setActive', '/main');
                }else{
                    this.breadcrumbList = matchs;
                    this.$store.dispatch('setActive', matchs[1].path);
                }
            },
            handleCommand(command) {
                switch (command) {
                    case 'logout':
                        UserLogout().then(()=>{
                            this.$message({
                                type: 'success',
                                duration: '1000',
                                message: '正在退出......',
                                onClose:() =>{
                                    this.$store.dispatch('userLogout').then(()=>{
                                        this.$router.push({name:'Login'});
                                    });
                                }
                            });
                        });
                        break;
                }
            }
        }
    }
</script>
